<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023年5月11日
  Time: 9:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script src="webjars/jquery/3.6.0/dist/jquery.min.js"></script>
<link rel="stylesheet" href="webjars/bootstrap/3.4.1/dist/css/bootstrap.css">
<script src="webjars/bootstrap/3.4.1/dist/js/bootstrap.js"></script>
<style>
    .container {
        margin-top: 10px;
    }

    .table {
        text-align: center;
    }

    .navigation {
        padding: 0;
        margin: 0;
    }

    .panel-footer {
        padding: 0;
        padding-right: 20px;
    }

    .clearfix:after {
        content: '\20';
        display: block;
        height: 0;
        clear: both
    }
    .clearfix {
        zoom: 1
    }
    .clear {
        clear: both;
        height: 0;
        line-height: 0;
        font-size: 0;
        visibility: hidden;
        overflow: hidden
    }
</style>
<html>
<head>
    <title>学生列表</title>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                <h4>SM整合开发(条件查询带分页)</h4>
            </h3>
        </div>
        <table class="table">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>所在班级</td>
                <td>操作</td>
            </tr>
            <c:forEach items="${pr.rows}" var="stud">
                <tr>
                    <td>${stud.sid2}</td>
                    <td>${stud.sname}</td>
                    <td>${stud.sex}</td>
                    <td>${stud.age}</td>
                    <td>${stud.addr}</td>
                    <td>${stud.cname}</td>
                    <td>
                        <div class="btn-group">
                            <a href="" class="btn btn-success btn-sm glyphicon glyphicon-pencil"></a>
                            <a href="" class="btn btn-danger btn-sm glyphicon glyphicon-trash"></a>
                        </div>
                    </td>
                </tr>
            </c:forEach>
        </table>
        <div class="panel-footer text-left clearfix">
            <%--1. 条件查询--%>
            <form class="form-inline" style="float:left;margin-top: 20px;margin-left: 10px;"
                  action="/student?cmd=search" method="post">
                <input type="hidden" name="page" id="page" value="${param.page}">
                <div class="form-group">
                    <input type="text" class="form-control" name="sname" value="${param.sname}" placeholder="输入学生姓名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" name="addr" value="${param.addr}" placeholder="输入学生住址">
                </div>
                <div class="form-group">
                    <select class="form-control" name="cid">
                        <option value="0">所有班级</option>
                        <c:forEach items="${classes}" var="c">
                            <option value="${c.cid}" ${c.cid == param.cid ? 'selected' : ''}>${c.cname}</option>
                        </c:forEach>
                    </select>
                </div>
                <button type="submit" class="btn btn-default btn-sm">查询</button>
            </form>
            <%--2. 分页导航--%>
            <nav aria-label="Page navigation" style="float:right">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <c:forEach begin="1" end="${pr.totalPage}" var="p">
                        <li class="${p == param.page ? 'active' : ''}"><a
                                href="javascript:void(0)" onclick="skipPage(${p})">${p}</a></li>
                    </c:forEach>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
</html>

<script>
    //1. 当点击超链接按钮时
    function skipPage(p){
       //1.1 为表单隐藏域中的page参数赋值
       $("#page").val(p)
       //1.2 提交表单
       document.forms[0].submit()
    }
</script>